<!--
* @FileDescription: 实时列表断电、馈电态势分析实时曲线组件
* @Author: yuec621@outlook.com
* @Date: 2024-12-26 13:02:34
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-09-23 15:29:18
-->
<template>
    <!-- 横向状态图和横向折线图及自定义y轴label -->
    <div :id="'comChart' + index" v-for="(item, index) in state.pointDataList" style="width: 100%
    ;height: 30vh;" :style="{ marginTop: (index * 30) + 'px' }">
    </div>
</template>
<script setup>
import {
    computed,
    nextTick,
    reactive,
    watchEffect
} from 'vue';
import axios from "@/utils/request"
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import useUserStore from "@/store/modules/user";
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration);
const {
    proxy
} = getCurrentInstance();
const userStore = useUserStore();
const props = defineProps({
    chartList: {
        type: Object,
        default: () => {
            return {}
        }
    },
    pointDataList: {
        type: Object,
        default: () => {
            return {}
        }
    },
    targetTime: {
        type: String,
        default: () => {
            return ''
        }
    },
    drawerShow: {
        type: Boolean,
        default: () => {
            return false
        }
    }
})
let comChart

const state = reactive({
    jishi: 0,
    targetTime: '',
    textContent: '',
    chartList: [],
    pointDataList: [],
    chartOptions: {
        xAxis: [],
        yAxis: [],
        legend: [],
    },
    xAxis: [],
    timer: null,
    sunchuList: {
    },
    chartListjishi:[],
    chartListdd:[]
})

function formatSecToStr(seconds) {
    let daySec = 24 * 60 * 60;
    let hourSec = 60 * 60;
    let minuteSec = 60;
    let dd = Math.floor(seconds / daySec);
    let hh = Math.floor((seconds % daySec) / hourSec);
    let mm = Math.floor((seconds % hourSec) / minuteSec);
    let ss = seconds % minuteSec;
    if (dd > 0) {
        return dd + "天" + hh + "小时" + mm + "分钟" + ss + "秒";
    } else if (hh > 0) {
        return hh + "小时" + mm + "分钟" + ss + "秒";
    } else if (mm > 0) {
        return mm + "分钟" + ss + "秒";
    } else {
        return ss + "秒";
    }
}

function setC1(item) {
    let option = Object.assign(state.chartOptions, {})
    let gridIndex = []
    let thrList = [1, 2, 3, 4, 5, 6]
    var date = dayjs(item[item.length - 1].dateTime).format('YYYY-MM-DD HH:mm:ss')
    let ggg = dayjs(date).diff(item[0].dateTime, 'second')
    thrList.forEach((itemrr, index) => {
        gridIndex.push({
            left: '4.8%',
            top: index == 0 || index == 3 || index == 4 || index == 5 ? '20%' : index == 3 ? '50' : 20 * index + '%',
            height: index == 0 || index == 3 || index == 4 || index == 5 ? '60%' : index == 2 ? '40%' : '10%',
            right: index == 1 || index == 2 ? '10%' : '6%',
            bottom: index == 5 ? '10%' : '10%'
        })
    })
    option.color = ['rgba(64, 158, 255, 1)', 'rgba(245, 108, 108, 1)', 'rgba(121, 72, 234, 1)', 'rgba(255, 153, 0, 1)', 'rgba(103, 194, 58, 1)',
        'rgba(245, 108, 108, 1)'
    ]


    option.legend = {
        show: true,
        top: '-4',
        itemWidth: 15,
        itemHeight: 4,
        icon: 'rect'

    }
    option.xAxis = [{
        show: false,
        type: "category",
        gridIndex: 0,
        data: item.map(itemsub => {
            return itemsub.dateTime != null ? dayjs(itemsub.dateTime).format('HH:mm:ss') : ''
        }),
        axisLine: {
            show: false,
            lineStyle: {
                color: "red",
            },
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: false,
            color: "red",
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: "rgba(91, 109, 128, 0.16)",
                type: "dashed",
            },
        },
    }, {
        show: false,
        type: "category",
        gridIndex: 1,
        axisLine: {
            show: true,
            lineStyle: {
                color: "green",
            },
        },
        axisLabel: {
            show: true,
            color: "green",
        },
        data: item.map(itemsub => {
            return itemsub.dateTime != null ? dayjs(itemsub.dateTime).format('HH:mm:ss') : ''
        }),
    }, {
        show: false,
        type: "category",
        // position:'bottom',
        gridIndex: 2,
        axisLine: {
            show: true,
            lineStyle: {
                color: "yellow",
            },
        },
        axisLabel: {
            show: true,
            color: "yellow",
        },
        data: item.map(itemsub => {
            return itemsub.dateTime != null ? dayjs(itemsub.dateTime).format('HH:mm:ss') : ''
        }),
    }, {
        show: false,
        type: "category",
        gridIndex: 3,
        data: item.map(itemsub => {
            return itemsub.dateTime != null ? dayjs(itemsub.dateTime).format('HH:mm:ss') : ''
        }),
    }, {
        show: false,
        type: "category",
        gridIndex: 4,
        data: item.map(itemsub => {
            return itemsub.dateTime != null ? dayjs(itemsub.dateTime).format('HH:mm:ss') : ''
        }),
    }, {
        show: true,
        type: "category",
        axisLine: {
            show: false,
            lineStyle: {
                color: "rgba(91, 109, 128, 1)",
            },
        },
        axisTick: {
            show: false,
        },
        gridIndex: 5,
        data: item.map(itemsub => {
            return itemsub.dateTime != null ? dayjs(itemsub.dateTime).format('HH:mm:ss') : ''
        }),
    }]
    let stateArr = []
    if (item[0].realPoint.pointId.includes('D')) {
        if (item[1] && item[1].realPoint.switchShows && item[1].realPoint.switchShows.length > 0) {
            for (let i = 0; i < item[1].realPoint.switchShows.length; i++) {
                stateArr.push({
                    label: item[1].realPoint.switchShows[i],
                    value: i
                })
            }
        }
    }

    let stateArrkc = []
    if (item[0].controlPoint.pointId.includes('C')) {
        if (item[1] && item[1].controlPoint.switchShows && item[1].controlPoint.switchShows.length > 0) {
            for (let i = 0; i < item[1].controlPoint.switchShows.length; i++) {
                stateArrkc.push({
                    pointId: item[0].controlPoint.pointId,
                    label: item[1].controlPoint.switchShows[i],
                    value: i
                })
            }
        }
    }

    let stateArrkd = []
    if (item[0].feedPoint.pointId.includes('D')) {
        if (item[1] && item[1].feedPoint.switchShows && item[1].feedPoint.switchShows.length > 0) {
            for (let i = 0; i < item[1].feedPoint.switchShows.length; i++) {
                stateArrkd.push({
                    pointId: item[0].feedPoint.pointId,
                    label: item[1].feedPoint.switchShows[i],
                    value: i
                })
            }
        }
    }
    option.yAxis = [{
        type: "value",
        position: 'left',
        gridIndex: 0,
        min: item[0].realPoint.pointId.includes('D') ? 3 : '-5',
        nameLocation: '',
        nameTextStyle: {
            color: '#000',
            align: 'right',
            verticalAlign: 'middle',
            rich: {
                b: {
                    padding: [0, 10, 0, 0]
                },
                underline: { //模拟画下划线
                    backgroundColor: 'rgba(218, 231, 255, 1)',
                    position: 'bottom',
                    height: 1,
                    width: 100
                }
            },
        },
        axisLabel: {
            show: item[0].realPoint.pointId.includes('D') ? false : true,
            formatter: "{value}",
            color: "rgba(62, 70, 79, 1)",
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(91, 109, 128, 0.8)",
            },
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: "rgba(91, 109, 128, 0.16)",
                type: "dashed",
            },
        },
        interval: 1
    }, {
        type: "value",
        gridIndex: 1,
        // position: 'right',
        min: 0,
        axisLabel: {
            show: item[0].controlPoint.pointId.includes('C') ? false : true,
            formatter: "{value}",
            color: "rgba(62, 70, 79, 1)",
        },
        nameTextStyle: {
            color: '#000',
            align: 'right',
            verticalAlign: 'end',
            padding: [0, -50, 0, 0]
        },
        splitLine: {
            show: false
        },
        interval: 1
    }, {
        show: true,
        type: "value",
        gridIndex: 2,
        position: 'right',
        min: 0,
        max: 2,
        axisLabel: {
            show: item[0].feedPoint.pointId.includes('D') ? false : true,
            formatter: "{value}",
            color: "red",
        },
        splitLine: {
            show: true
        },
        interval: 1
    }, {
        type: "value",
        gridIndex: 3,
        min: '-5',
        max: '5',
        axisLabel: {
            show: false
        }
    },
    {
        type: "value",
        gridIndex: 4,
        min: '-5',
        max: '5',
        axisLabel: {
            show: false
        }
    },
    {
        type: "value",
        gridIndex: 5,
        min: '-5',
        max: '5',
        axisLabel: {
            show: false
        }
    }
    ]
    option.grid = gridIndex
    let dValue, aaa, dValue1, aaa1, dValue2, aaa2
    option.series = [{
        type: "line",
        name: '实时曲线',
        step: item[0].realPoint.pointId.includes('D') ? true : false,
        data: item.map((itemsub, suabIndex) => {
            dValue = itemsub.realPoint.switchShows.map((itemd, indexd) => {
                if (itemsub.realPoint.pointValue == itemd) {
                    aaa = indexd
                }
                return itemsub.realPoint.pointValue == itemd ? indexd : null
            })
            return itemsub.realPoint.pointId.includes('D') ? aaa : suabIndex == 0 ? '-' : itemsub
                .realPoint.pointValue
        }),
        xAxisIndex: 0,
        yAxisIndex: 0,
        smooth: false,
        symbol: item[0].realPoint.pointId.includes('D') ? 'none' : 'pin',
        symbolSize: item[0].realPoint.pointId.includes('D') ? 4 : 40,
        lineStyle: {
            color: 'rgba(64, 158, 255, 1)'
        },
        label: {
            show: item[0].realPoint.pointId.includes('D') ? false : true,
            position: "top",
            offset: [0, 25],
            textStyle: {
                color: "#fff",
            },
        },
        markLine: {
            symbol: "none",
            silent: false,
            data: stateArr.map(item => {
                return {
                    yAxis: item.value,
                    label: {
                        show: true,
                        position: "start",
                        formatter: item.label,
                        fontSize: 14
                    },
                    lineStyle: {
                        color: "transparent"
                    }
                }
            })
        },
        animation: false
    }, {
        type: "line",
        name: '开出口曲线',
        step: item[0].controlPoint.pointId.includes('C') ? true : false,
        symbol: 'none',
        data: item.map(itemsub => {
            dValue1 = itemsub.controlPoint.switchShows.map((itemd, indexd) => {
                if (itemsub.controlPoint.pointValue == itemd) {
                    aaa1 = indexd
                }
                return itemsub.controlPoint.pointValue == itemd ? indexd : null
            })
            return itemsub.controlPoint.pointId.includes('C') ? aaa1 : itemsub.controlPoint
                .pointValue
        }),
        xAxisIndex: 1,
        yAxisIndex: 1,
        smooth: false,
        lineStyle: {
            color: 'rgba(245, 108, 108, 1)'
        },
        markLine: {
            symbol: "none",
            silent: false,
            data: stateArrkc.map((item, index) => {
                return {
                    yAxis: item.value,
                    label: {
                        show: true,
                        position: "end",
                        formatter: index == 0 ? item.label + item.pointId : item.label,
                        fontSize: 12
                    },
                    lineStyle: {
                        color: "transparent"
                    }
                }
            })
        },
        animation: false
    }, {
        type: "line",
        symbol: 'none',
        name: '馈电曲线',
        step: item[0].feedPoint.pointId.includes('D') ? true : false,
        data: item.map(itemsub => {
            dValue2 = stateArrkd.map((itemd, indexd) => {
                if (itemsub.feedPoint.pointValue === itemd.label) {
                    aaa2 = itemd.value
                } else {
                    aaa2 = ''
                }
                return itemsub.feedPoint.pointValue == itemd.label ? itemd.value : null
            })
            return itemsub.feedPoint.pointId.includes('D') ? aaa2 :
                itemsub.feedPoint.pointValue
        }),
        xAxisIndex: 2,
        yAxisIndex: 2,
        smooth: false,
        lineStyle: {
            color: 'rgba(121, 72, 234, 1)'
        },
        markLine: {
            symbol: "none",
            silent: false,
            data: stateArrkd.map((item, index) => {
                return {
                    yAxis: item.value,
                    label: {
                        show: true,
                        position: "end",
                        formatter: index == 0 ? item.label + item.pointId : item.label,
                        fontSize: 12
                    },
                    lineStyle: {
                        color: "transparent"
                    }
                }
            })
        },
        animation: false
    }, {
        type: "line",
        name: item[0].realPoint.pointId.includes('D') ? '' : '断电门限',
        xAxisIndex: 3,
        yAxisIndex: 3,
        markLine: {
            data: [{
                show: false,
                label: {
                    show: true,
                    position: "end",
                    formatter: item.label,
                    fontSize: 14
                },
                yAxis: item[0].realPoint.item.cutValue, //
                lineStyle: {
                    color: 'rgba(255, 153, 0, 1)'
                }
            }],
        },
        lineStyle: {
            color: 'rgba(255, 153, 0, 1)'
        }
    }, {
        type: "line",
        name: item[0].realPoint.pointId.includes('D') ? '' : '复电门限',
        xAxisIndex: 4,
        yAxisIndex: 4,
        markLine: {
            data: [{
                yAxis: item[0].realPoint.item.resumeValue,
                label: {
                    show: true,
                    position: "end",
                    formatter: item.label,
                    fontSize: 14
                },
                lineStyle: {
                    color: 'rgba(103, 194, 58, 1)'
                }
            }],
        },
        lineStyle: {
            color: 'rgba(103, 194, 58, 1)'
        }
    }, {
        type: "line",
        // name: '实时曲线',
        step: item[0].realPoint.pointId.includes('D') ? true : false,
        data: item.map((itemsub, suabIndex) => {
            dValue = itemsub.realPoint.switchShows.map((itemd, indexd) => {
                if (itemsub.realPoint.pointValue == itemd) {
                    aaa = indexd
                }
                return itemsub.realPoint.pointValue == itemd ? indexd : null
            })
            return itemsub.realPoint.pointId.includes('D') ? undefined : suabIndex == 0 ||
                suabIndex == 1 ? itemsub.realPoint.pointValue : '-'
        }),
        xAxisIndex: 0,
        yAxisIndex: 0,
        smooth: false,
        symbol: item[0].realPoint.pointId.includes('D') ? 'none' : 'pin',
        symbolSize: item[0].realPoint.pointId.includes('D') ? 4 : 40,
        lineStyle: {
            color: 'rgba(245, 108, 108, 1)'
        },
        label: {
            show: item[0].realPoint.pointId.includes('D') ? false : true,
            position: "top",
            offset: [0, 25],
            textStyle: {
                color: "#fff",
            },
        },
        animation: false
    }]
    option.title = {
        text: '持续时长' + '(' + formatSecToStr(ggg) + ')\t\t' + item[0].realPoint.pointId + '/' + item[0].realPoint
            .item
            .sensorName +
            '/' + item[0]
                .realPoint.item.place + '\t\t' + item[0].realPoint.item
                .cutReasonType,
        top: '6%',
        left: '0%',
        textStyle: {
            fontSize: '12',
        },
    }
    return option
}
// 循环定时操作
function startTimer() {
    state.timer = setInterval(() => {
        state.jishi++;
        jiehunFun()
        if (state.jishi >= 60) {
            state.jishi=0
        }
    }, 1000);
};
startTimer()

function updateChart(chartList) {
    for (let index = 0; index < state.pointDataList.length; index++) {
        state.sunchuList['list' + index] = chartList.map((item, i) => {
            return item[index]
        })
        nextTick(() => {
            comChart = echarts.init(document.getElementById('comChart' +
                index), 'macarons');
            comChart.setOption(setC1(state.sunchuList['list' + index]))
        })
    }
}
// 获取曲线
const getrealAlarmLine = (data) => {
    return axios({
        url: '/pointData/realCutLine',
        method: 'post',
        data: {
            cutPoints: data.map(item => {
                return {
                    pointId: item.pointId,
                    controlPointId: item.controlPortId,
                    feedPointId: item.feedPointId
                }
            })
        }
    })
}
async function jiehunFun() {
    if(state.jishi>=60){
        let arrr = props.pointDataList.map(item => {
            return {
                realPoint: {
                    pointId: item.pointId,
                    pointValue: item.cutStartValue,
                    item: item,
                    switchShows: []
                },
                controlPoint: {
                    pointId: item.controlPortId,
                    pointValue: null,
                    item: item,
                    switchShows: []
                },
                feedPoint: {
                    pointId: item.feedPointId,
                    pointValue: null,
                    item: item,
                    switchShows: []
                },
                dateTime: item.cutStartTime
            }
        })
        state.chartList=[arrr]
    }
    let arr = await getrealAlarmLine(state.pointDataList)
    state.chartList.push(arr.data)
    updateChart(state.chartList)
}

onMounted(() => {
    window.addEventListener('resize', () => {
        comChart.resize();
    })
})
watchEffect(() => {
    if (!props.drawerShow) {
        clearInterval(state.timer)
    } else {
    }
    state.targetTime = props.targetTime
    nextTick(async () => {
        let arr = await getrealAlarmLine(props.pointDataList)
        let sortIndex = arr.data.map(item => item.realPoint.pointId)
        props.pointDataList.sort((a, b) =>
            sortIndex.indexOf(a.pointId) - sortIndex.indexOf(b.pointId))
        state.pointDataList = props.pointDataList
        let arrr = props.pointDataList.map(item => {
            return {
                realPoint: {
                    pointId: item.pointId,
                    pointValue: item.cutStartValue,
                    item: item,
                    switchShows: []
                },
                controlPoint: {
                    pointId: item.controlPortId,
                    pointValue: null,
                    item: item,
                    switchShows: []
                },
                feedPoint: {
                    pointId: item.feedPointId,
                    pointValue: null,
                    item: item,
                    switchShows: []
                },
                dateTime: item.cutStartTime
            }
        })
        if (arrr.length > 0) {
            nextTick(() => {
                state.chartList = [arrr]
                state.chartListjishi=[arrr]
                arrr.forEach((item, i) => {
                    comChart = echarts.init(document.getElementById('comChart' +
                        i), 'macarons');
                    comChart.setOption(setC1([item]));
                })
            })
        }
    })
})
</script>